<template>
  <div class="exhibition-detail">
    <div class="detail-header">
      <button class="back-button" @click="goBack">← 返回展览</button>
      <h1>{{ artwork.title }}</h1>
      <p class="artist">{{ artwork.artist }} | {{ artwork.dynasty }} | {{ artwork.style }}</p>
    </div>

    <div class="detail-content">
      <div class="artwork-image-container">
        <img :src="artwork.image" :alt="artwork.title" class="artwork-image">
        <button class="enter-3d-button" @click="goToVirtualGallery">进入虚拟展览馆</button>
        <button class="enter-babylon-button" @click="goToBabylonExhibition">3D展览馆</button>
      </div>

      <div class="artwork-info">
        <div class="info-section">
          <h2>作品介绍</h2>
          <p>{{ artwork.description }}</p>
        </div>

        <div class="info-section">
          <h2>创作背景</h2>
          <p>{{ artwork.background }}</p>
        </div>

        <div class="info-section">
          <h2>艺术特色</h2>
          <p>{{ artwork.features }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { artworkApi } from '@/api'

// 从路由获取作品ID
const route = useRoute()
const router = useRouter()

// 作品数据
const artwork = ref({})

// 获取作品详情
const fetchArtworkDetail = async () => {
  try {
    const id = route.params.id
    const response = await artworkApi.getArtworkById(id)
    artwork.value = response.data
  } catch (error) {
    console.error('获取作品详情失败:', error)
    // 如果API调用失败，使用模拟数据
    useMockData()
  }
}

// 使用模拟数据（备用方案）
const useMockData = () => {
  const artworks = [
    {
      id: 1,
      title: '兰亭序',
      artist: '王羲之',
      dynasty: '东晋',
      style: '行书',
      category: 'ancient',
      description: '被誉为"天下第一行书"，是王羲之在兰亭雅集时所作，书法飘逸秀美，气韵生动。',
      background: '东晋永和九年（353年），王羲之与谢安、孙绰等四十一位军政高官在山阴兰亭会聚，饮酒赋诗，王羲之为此诗集作序。',
      features: '笔法飘逸秀美，气韵生动，章法自然，体现了王羲之书法艺术的最高成就。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 2,
      title: '祭侄文稿',
      artist: '颜真卿',
      dynasty: '唐代',
      style: '行书',
      category: 'ancient',
      description: '颜真卿为祭奠侄子颜季明所作，书法雄浑悲壮，被誉为"天下第二行书"。',
      background: '安史之乱时，颜真卿的侄子颜季明在抵抗叛军时被害，颜真卿悲愤交加写下此文。',
      features: '笔法雄浑，情感真挚，线条粗细变化丰富，体现了颜体行书的独特风格。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 3,
      title: '黄州寒食诗帖',
      artist: '苏轼',
      dynasty: '宋代',
      style: '行书',
      category: 'ancient',
      description: '苏轼被贬黄州时所作，书法自然流畅，情感真挚，体现了文人书法的独特韵味。',
      background: '苏轼被贬黄州第三年寒食节时所作，表达了对人生际遇的感慨。',
      features: '笔法自然，结构疏密有致，体现了文人书法的独特韵味。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 4,
      title: '自叙帖',
      artist: '怀素',
      dynasty: '唐代',
      style: '草书',
      category: 'ancient',
      description: '怀素的代表作之一，笔法狂放不羁，线条流畅如行云流水，展现了草书的极致之美。',
      background: '怀素在长安与文人雅士交往时所作，记录了自己学习草书的经历。',
      features: '笔法狂放，线条流畅如行云流水，展现了草书的极致之美。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 5,
      title: '急就章',
      artist: '宋克',
      dynasty: '明代',
      style: '章草',
      category: 'ancient',
      description: '明代书法家宋克的章草代表作，笔法古朴，结构严谨，体现了章草的独特韵味。',
      background: '明代书法家宋克的章草代表作，体现了章草的独特韵味。',
      features: '笔法古朴，结构严谨，体现了章草的独特韵味。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 6,
      title: '毛泽东诗词',
      artist: '毛泽东',
      dynasty: '现代',
      style: '草书',
      category: 'modern',
      description: '毛泽东的书法作品，气势磅礴，笔力雄健，体现了革命家的豪迈气概。',
      background: '毛泽东的书法作品，体现了革命家的豪迈气概。',
      features: '气势磅礴，笔力雄健，体现了革命家的豪迈气概。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    }
  ]

  artwork.value = artworks.find(item => item.id === parseInt(route.params.id)) || artworks[0]
}

// 返回展览页面
const goBack = () => {
  router.push('/exhibition')
}

// 跳转到3D页面
const goToVirtualGallery = () => {
  //  router.push(`/exhibition/${artwork.value.id}/virtual-gallery`)
  // 使用window.open在新窗口中打开页面
  window.open(router.resolve({
    path: `/exhibition/${artwork.value.id}/virtual-gallery`
  }).href, '_blank');
}

// 跳转到Babylon.js展览页面
const goToBabylonExhibition = () => {
  // router.push(`/exhibition/${artwork.value.id}/babylon-exhibition`)
  window.open(router.resolve({
    path: `/exhibition/${artwork.value.id}/babylon-exhibition`
  }).href, '_blank');
}

// 组件挂载时获取数据
onMounted(() => {
  fetchArtworkDetail()
})

</script>

<style scoped>
.exhibition-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.detail-header {
  margin-bottom: 2rem;
  position: relative;
  text-align: center;
}

.back-button {
  background-color: #667eea;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}

.back-button:hover {
  background-color: #5a6fd8;
}

.detail-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
  text-align: center;
  margin-top: 0;
  padding-top: 0;
}

.artist {
  font-size: 1.2rem;
  color: #667eea;
  margin-bottom: 2rem;
  text-align: center;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.artwork-image-container {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.artwork-image {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 8px;
}

.enter-3d-button {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background-color: #667eea;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.enter-babylon-button {
  position: absolute;
  bottom: 2rem;
  right: 15rem;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.enter-3d-button:hover {
  background-color: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.enter-babylon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.artwork-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
  border-bottom: 2px solid #667eea;
  padding-bottom: 0.5rem;
}

.info-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

@media (max-width: 768px) {
  .detail-content {
    grid-template-columns: 1fr;
  }

  .detail-header h1 {
    font-size: 2rem;
  }
}
</style>